<template>
	<view>
		<view class="top_bar" style="background: rgba(244,244,244,0.96);; border-bottom:1rpx solid #b5b5b5;"  >
			<view @click="toUserDtetail" class="top_bar_left">
				<image :src="userinfo.userimg" mode=""></image>
			</view>
			<view class="top_bar_index">
				<image src="../../static/applogo.png" ></image>
			</view>
			<view class="top_bar_right">
				<image @click="toSearch" src="../../static/image/index/search.png" mode=""></image>
				<image @click="toBuildGroup" src="../../static/image/index/plass.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="apply">
				<view class="apply_item" @click="toApplications" >
					<view class="item_image">
						<image src="../../static/image/index/application.png" mode=""></image>
						<!-- <view class="news" v-if='item.tip'>
							{{ item.tip }}
						</view> -->
					</view>
					<view class="item_data" ><view class="data_name">新朋友</view><view class="data_date">刚刚</view>
					</view>
				</view>
				<view class="apply_item apply-bottom" @click="toGroupView" >
					<view class="item_image">
						<image src="../../static/image/index/userss.png" mode=""></image>
						<!-- <view class="news" v-if='item.tip'>
							{{ item.tip }}
						</view> -->
					</view>
					<view class="item_data" ><view class="data_name">群聊</view><view class="data_date">刚刚</view>
					</view>
				</view>
				<view class="apply_item" v-for="(item,index) in friends" :key='index' @click="toApplications" >
					<view class="item_image">
						<image :src="item.userimg" mode=""></image>
					</view>
					<view class="item_data" ><view class="data_name">{{ item.username }}</view><view class="data_date"></view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import data1  from '../../commons/js/dateformat.js'
	import request from '../../utails/request.js'
	
	export default {
		data() {
			return {
				userinfo:{},
				friends:[]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			
			async getData(){
				this.userInfo = uni.getStorageSync('userinfo')
				let res = await request.request({url:'/friendsview/',data:{userid:this.userInfo.id}})
				this.friends = res
			},
			
			// 进入群聊
			toGroupView(){
				uni.navigateTo({
					url:'../groupview/groupview'
				})
			},
			
			// 跳转到好友申请界面
			toApplications(){
				uni.navigateTo({
					url:'../friendrequest/friendrequest'
				})
			},
			// 跳转到搜索页面
			toSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			// 跳转到建群页面
			toBuildGroup(){
				uni.navigateTo({
					url:'/pages/buildgroup/buildgroup'
				})
			}
		}
	}
</script>

<style>
	@import "../../commons/css/myss.scss";
	
	/* 聊天区域 */
	.main{
		height: 100%;
		width: 100%;
	}
	
	.apply{
		position: absolute;
		top: 88rpx;
		left: 20rpx;
		display: flex;
		flex-direction: column;
		background-color:  #eeeeee;
	}
	.apply_item{
		flex: 1;
		background-color: #fff;
	}
	.apply-bottom{
		margin-bottom: 20rpx;
	}
	
	.item_image{
		float: left;
		padding: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.item_image image{
		height: 90rpx;
		width: 90rpx;
		border-radius: 30%;
		/* 防止图片显示不出来 */
		background-color: #f4ea2a;
	}
	/* 新消息提示 */
	.item_image .news{
		position: absolute;
		top:5rpx;
		right: 5rpx;
		height: 35rpx;
		width: 35rpx;
		background-color: red;
		font-size: 16rpx;
		text-align: center;
		line-height: 35rpx;
		color: white;
		border-radius: 16rpx;
	}
	
	.item_data{
		/* float: left;
		width: 540rpx; */
		margin-left: 120rpx;
		width: 75vw;
		padding: 0 15rpx;
		padding-top: 25rpx;
		position: relative;
		
	}
	.data_name{
		margin-top: 10rpx;
		font-size: 34rpx;
	}
	.data_main{
		font-size: 26rpx;
		color: #808080;
	    display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.data_date{
		position: absolute;
		right: 5rpx;
		top:25rpx;
		font-size: 16rpx;
	}
	
	/* 请求添加好友 */
	#application{
		height: 60rpx;
		width: 60rpx;
	}
	
	
	
</style>
